JS中的观察者模式DEMO |
您所在的位置：网站首页 › js demo什么意思 › JS中的观察者模式DEMO |
|
观察者模式
这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。 例子假如我们正在开发一个商城网站，网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件，就是必须先用ajax异步请求获取用户的登录信息。这是很正常的，比如用户的名字和头像要显示在header模块里，而这两个字段都来自用户登录后返回的信息。这个时候，我们就可以把这几个模块的渲染事件都放到一个数组里面，然后待登录成功之后再遍历这个数组并且调用每一个方法。 var Event = { // 通过on接口监听事件eventName // 如果事件eventName被触发，则执行callback回调函数 on: function (eventName, callback) { //我的代码 if (!this.handles) { this.handles = {}; } if (!this.handles[eventName]) { this.handles[eventName] = []; } this.handles[eventName].push(callback); }, // 触发事件 eventName emit: function (eventName) { //你的代码 //console.info('eventName', eventName); // console.info('this.handles', this.handles); if (this.handles[arguments[0]]) { for (var i = 0; i < this.handles[arguments[0]].length; i++) { this.handles[arguments[0]] i; } } } };绑定事件 Event.on('test', function (result) { console.log(result); }); Event.on('test', function () { console.log('test'); }); //触发 Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test' |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |